<template>
  <view class="code-input-container">
    <view class="code-input-wrapper">
      <input
        v-for="(item, index) in codeArray"
        :key="index"
        :ref="`input${index}`"
        class="code-input-item"
        :class="{ 'active': currentIndex === index, 'filled': item !== '' }"
        type="number"
        maxlength="1"
        :value="item"
        @input="onInput(index, $event)"
        @focus="onFocus(index)"
        @blur="onBlur"
        :disabled="disabled"
      />
    </view>
    <view v-if="showTip" class="code-tip">
      <text class="tip-text">{{ tipText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CodeInput',
  props: {
    // 验证码长度
    length: {
      type: Number,
      default: 6
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示提示
    showTip: {
      type: Boolean,
      default: true
    },
    // 提示文本
    tipText: {
      type: String,
      default: '请输入验证码'
    },
    // 自动聚焦
    autoFocus: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      codeArray: [],
      currentIndex: 0
    }
  },
  computed: {
    // 当前输入的验证码
    code() {
      return this.codeArray.join('')
    }
  },
  watch: {
    length: {
      immediate: true,
      handler(newVal) {
        this.initCodeArray(newVal)
      }
    },
    code(newVal) {
      this.$emit('input', newVal)
      this.$emit('change', newVal)
      
      // 如果输入完成，触发完成事件
      if (newVal.length === this.length) {
        this.$emit('complete', newVal)
      }
    }
  },
  mounted() {
    if (this.autoFocus) {
      this.focusInput(0)
    }
  },
  methods: {
    // 初始化验证码数组
    initCodeArray(length) {
      this.codeArray = new Array(length).fill('')
      this.currentIndex = 0
    },
    
    // 输入事件处理
    onInput(index, event) {
      const value = event.detail.value
      
      // 只允许输入数字
      if (!/^\d*$/.test(value)) {
        return
      }
      
      // 更新当前位置的值
      this.$set(this.codeArray, index, value)
      
      // 如果输入了值，自动跳到下一个输入框
      if (value && index < this.length - 1) {
        this.focusInput(index + 1)
      }
    },
    
    // 聚焦事件处理
    onFocus(index) {
      this.currentIndex = index
    },
    
    // 失焦事件处理
    onBlur() {
      // 可以在这里添加失焦后的处理逻辑
    },
    
    // 聚焦指定输入框
    focusInput(index) {
      this.currentIndex = index
      this.$nextTick(() => {
        const inputRef = this.$refs[`input${index}`]
        if (inputRef && inputRef[0]) {
          inputRef[0].focus()
        }
      })
    },
    
    // 清空验证码
    clear() {
      this.initCodeArray(this.length)
      if (this.autoFocus) {
        this.focusInput(0)
      }
    },
    
    // 设置验证码值
    setValue(code) {
      const codeStr = String(code).slice(0, this.length)
      for (let i = 0; i < this.length; i++) {
        this.$set(this.codeArray, i, codeStr[i] || '')
      }
      
      // 聚焦到下一个空位置
      const nextEmptyIndex = this.codeArray.findIndex(item => item === '')
      if (nextEmptyIndex !== -1) {
        this.focusInput(nextEmptyIndex)
      } else if (this.codeArray.every(item => item !== '')) {
        // 如果都填满了，聚焦到最后一个
        this.focusInput(this.length - 1)
      }
    },
    
    // 获取当前验证码值
    getValue() {
      return this.code
    },
    
    // 验证是否输入完整
    isComplete() {
      return this.code.length === this.length
    }
  }
}
</script>

<style scoped>
.code-input-container {
  width: 100%;
}

.code-input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10rpx;
}

.code-input-item {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  background: #fff;
  transition: all 0.3s ease;
}

.code-input-item:focus,
.code-input-item.active {
  border-color: #4080FF;
  box-shadow: 0 0 0 4rpx rgba(64, 128, 255, 0.1);
}

.code-input-item.filled {
  border-color: #4080FF;
  background: rgba(64, 128, 255, 0.05);
}

.code-input-item:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.code-tip {
  margin-top: 20rpx;
  text-align: center;
}

.tip-text {
  font-size: 28rpx;
  color: #666;
}

/* 响应式设计 */
@media screen and (max-width: 400px) {
  .code-input-item {
    width: 70rpx;
    height: 70rpx;
    font-size: 32rpx;
  }
}

/* 动画效果 */
.code-input-item {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 错误状态 */
.code-input-item.error {
  border-color: #ff4757;
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5rpx); }
  75% { transform: translateX(5rpx); }
}
</style>
